<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style  type="text/css">
        .main-content {
            padding-top: 8px;
            height: 70px;
            width: 270px;
            border: 1px solid #666666;
            background-color: #CBCBCB;
            border-radius: 20px;
            box-shadow: 0 0 1px 2px #ffffff inset;
        }
        .content {
            margin: 0 auto;
            height: 60px;
            width: 250px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 30px 2px -1px #DCDCDC inset, 0 -1px 1px 1px #8C8C8C,0 1px 1px 1px #616161;
            background-color: #B7B7B7;
        }
        .content-item {
            margin: 1px auto;
            padding: 10px 0;
            width: 210px;
            height: 30px;
        }
        .text {
            position: relative;
            color: #555454;
            margin: 0 10px;
            font-size: 20px;
            font-weight: bold;
            text-shadow: 1px 1px 1px #DEDEDE;
        }
        .star-five {
            font-size: 24px;
            font-weight: bold;
            color: #888888;
            text-shadow: 0 1px 1px #DEDEDE,0 -1px 1px #A3A3A3;
        }
</style>
</head>
<body>
<div class="main-content">
    <div class="content">
        <div class="content-item">
            <span class="star-five">
                ★
            </span>
                <span class="text">
                CHECKOUT
            </span>
                <span class="star-five">
                ★
            </span>
        </div>
    </div>
</div>


</body>
</html>
